import { useState } from "react";
import Counter from "./components/counter";

const Chapter4 = (props) => {
    const { title } = props;
    const [show, setShow] = useState(true);
    return (
        <div className='wrapper wrapper3'>
            <div className='page-header'>
                <h3>{title}</h3>
            </div>
            <div className='page-content'>{show && <Counter />}</div>
            <button
                onClick={() => setShow(!show)}
                className={show ? `btn btn-danger` : `btn btn-default`}
            >
                {show ? `销毁` : `渲染`}
            </button>
        </div>
    );
};

export default Chapter4;
